﻿<%@ page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
    <head>
    	<!-- Meta -->
        <meta charset="utf-8"/>
        <title>Demande d'inscription</title>
        
        <!-- CSS -->
		<link rel="stylesheet" href="medias/css/form.css" type="text/css" media="screen"/>
		<link rel="stylesheet" href="medias/css/jquery-ui-1.10.3.custom.css"/>
		<link rel="stylesheet" href="medias/css/jquery.mobile-1.2.0.css"/>
		
		<!-- JQuery -->
		<meta name="viewport" content="width=device-width, initial-scale=1"/> 
		<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
		
		<!-- JS -->
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<script type="text/javascript" src="medias/javaScript/jquery.ui.datepicker-fr.js"></script>
    </head>
    
    <body>
    	<div data-role="page">
    	
			<div data-role="header">
            	<div id="banniere">
                	<br/> <br/>
                    <h1 >CrecheBook</h1>
                </div>
                <div id="searchBox">
        			<div class="ui-bar ui-bar-c">
        				<a href='search.jsp' rel='external' data-role='button' data-theme='c' data-corners='true' data-icon='home' data-inline='true'>Accueil</a>
                        <h2>Formulaire d'inscription</h2>
                    </div>
                </div>
            </div>
		
			<div data-role="content">
				<form method="post" action="demande" data-ajax="false">
		            <fieldset>
		                <legend>Demande d'inscription</legend>
		                <p>Vous pouvez faire une demande d'inscription via ce formulaire</p>
		                <br/> <br/>
		 				
		 				<label for="nom">Nom <span class="requis">*</span></label>
		 				<div class="ui-grid-a" style="margin-top:-5px;">
		                	<div class="ui-block-a" style="height:50px;">
		                		<input type="text" id="nom" name="nom" value="<c:out value="${pers.nom}"/>" maxlength="60"/>
		                	</div>
		                	<div class="ui-block-b" style="height:50px;padding-top:18px;text-align:center;font-size:14px;">
		                		<span class="erreur">${form.erreurs['nom']}</span>
		                	</div>
						</div>
						<br/>
		                
		                <label for="prenom">Prénom <span class="requis">*</span></label>
		                <div class="ui-grid-a" style="margin-top:-5px;">
		                	<div class="ui-block-a" style="height:50px;">
		                		<input type="text" id="prenom" name="prenom" value="<c:out value="${pers.prenom}"/>" maxlength="60"/>
		                	</div>
		                	<div class="ui-block-b" style="height:50px;padding-top:18px;text-align:center;font-size:14px;">
		                		<span class="erreur">${form.erreurs['prenom']}</span>
		                	</div>
		                </div>
		                <br/>
		                
		                <label for="date">Date de naissance <span class="requis">*</span></label>
						<div class="ui-grid-a" style="margin-top:-5px;">
		                	<div class="ui-block-a" style="height:50px;">
								<input type="text" id="date" name="date" value="<c:out value="${pers.date}"/>"/>
							</div>
		                	<div class="ui-block-b" style="height:50px;padding-top:18px;text-align:center;font-size:14px;">
								<span class="erreur">${form.erreurs['date']}</span>
							</div>
		                </div>
		                <br/>
						
						<label for="adresse">Adresse <span class="requis">*</span></label>
		                <div class="ui-grid-a" style="margin-top:-5px;">
			                <div class="ui-block-a" style="height:50px;">
			                	<input type="text" id="adresse" name="adresse" value="<c:out value="${pers.adresse.adresse}"/>" maxlength="60"/>
			                </div>
		                	<div class="ui-block-b" style="height:50px;padding-top:18px;text-align:center;font-size:14px;">
		                		<span class="erreur">${form.erreurs['adresse']}</span>
		                	</div>
		                </div>
		                <br/>
		 
		                <label for="code_postal">Code Postal <span class="requis">*</span></label>
		                <div class="ui-grid-a" style="margin-top:-5px;">
			                <div class="ui-block-a" style="height:50px;">
			                	<input type="number" id="code_postal" name="code_postal" value="<c:out value="${pers.adresse.CP}"/>" maxlength="5"/>
			                </div>
		                	<div class="ui-block-b" style="height:50px;padding-top:18px;text-align:center;font-size:14px;">
		                		<span class="erreur">${form.erreurs['code_postal']}</span>
		                	</div>
		                </div>
		                <br/>
		 
		                <label for="ville">Ville <span class="requis">*</span></label>
		                <div class="ui-grid-a" style="margin-top:-5px;">
			                <div class="ui-block-a" style="height:50px;">
			                	<input type="text" id="ville" name="ville" value="<c:out value="${pers.adresse.ville}"/>" maxlength="60"/>
			                </div>
		                	<div class="ui-block-b" style="height:50px;padding-top:18px;text-align:center;font-size:14px;">
		                		<span class="erreur">${form.erreurs['ville']}</span>
		                	</div>
		                </div>
		                <br/>
		                
		                <label for="tel">Numéro Tel <span class="requis">*</span></label>
		                <div class="ui-grid-a" style="margin-top:-5px;">
			                <div class="ui-block-a" style="height:50px;">
			                	<input type="tel" id="tel" name="tel" value="<c:out value="${pers.tel}"/>" maxlength="10"/>
			                </div>
		                	<div class="ui-block-b" style="height:50px;padding-top:18px;text-align:center;font-size:14px;">
		                		<span class="erreur">${form.erreurs['tel']}</span>
		                	</div>
		                </div>
		                <br/> 
		                
		                <label for="email">Adresse email <span class="requis">*</span></label>
		                <div class="ui-grid-a" style="margin-top:-5px;">
		                	<div class="ui-block-a" style="height:50px;">
		                		<input type="email" id="email" name="email" value="<c:out value="${admin.email}"/>" maxlength="60"/>
		                	</div>
		                	<div class="ui-block-b" style="height:50px;padding-top:18px;text-align:center;font-size:14px;">
		                		<span class="erreur">${form.erreurs['email']}</span>
		                	</div>
		                </div>
		                <br/> <br/>
		 				
		 				<div style="width:250px;height:50px;margin:auto;">
		                	<input type="submit" value="Inscription" data-theme="b" onclick="valide();"/>
		                </div>
		                <br/>
		                
		                <p class="erreur" align="center" style="font-size:14px;">
		                	${form.resultat}
		                </p>
		            </fieldset>
	        	</form>
			</div>
			
			<div data-role="footer">
				<h4 style="margin:30px;">
					<strong> CrecheBook 2013</strong> <br>
					<a href="legal.jsp" data-ajax="false">Mentions&nbsp;l&eacute;gales</a>&nbsp;|&nbsp;
					<a href="connexion" data-ajax="false">Administateur</a>
				</h4>
			</div>
			
		</div>
		
		<script type="text/javascript">
			var tab = ['nom', 'prenom', 'date', 'adresse', 'ville'];
			
			for (var i=0; i<tab.length; i++) {
				if (document.getElementById(tab[i]).value == tab[i]) {
					document.getElementById(tab[i]).value = '';
				}
			}
			
			$(function() {
				$('#date').datepicker();
				$('#date').on('focus click tap vclick', function (event) {
	                event.stopImmediatePropagation();
	                event.preventDefault();
	                $('#date').blur();
	            });
			});
		</script>
    </body>
</html>